<template>
	<view class="container">  
	  <!-- 顶部信息栏 -->  
	  <view class="top-info">  
	    <image class="avatar" :src="userPhoto" mode="aspectFit"></image>  
	     <view class="user-info">  
	            <!-- 根据isLoggedIn的值来决定显示什么内容 -->  
	            <text v-if="!isLoggedIn" class="username toLogin" @click="toLogin">登录/注册 ></text>  
	            <text v-else class="username">{{ userName }}</text>  
	          </view>  
		<view>
			<image style="width:25px;height:25px;margin-top: 25px;margin-right: 20px;"  src="../../static/images/shezhi.png">
		</view>
	  </view>  
	  
	  <!-- 功能模块列表 -->  
	  <u-grid :col="5" >
	  	<u-grid-item @click="gotoPendingpayment ">
	  	<!-- 	<u-icon name="photo" :size="46"></u-icon> -->
	  		<image style="width:40px;height:40px"  src="../../static/images/daifu.png">
	  		<view class="grid-text">待付款</view>
	  	</u-grid-item>
	  	<u-grid-item @click="gotoOngoing">
	  		<image style="width:40px;height:40px"  src="../../static/images/OIP.jpg">
	  		<view class="grid-text">正在进行</view>
	  	</u-grid-item>
	  	<u-grid-item @click="gotoappraise">
	  		<image style="width:40px;height:40px"  src="../../static/images/daiping.png">
	  		<view class="grid-text">待评价</view>
	  	</u-grid-item>
	  	<u-grid-item>
	  		<image style="width:40px;height:40px"  src="../../static/images/shouhou.png">
	  		<view class="grid-text">退货/售后</view>
	  	</u-grid-item> 
		<u-grid-item @click="gotoorders">
			<image style="width:40px;height:40px"  src="../../static/images/dingdan.png">
			<view class="grid-text">全部订单</view>
		</u-grid-item> 
	  </u-grid>
	  <!-- 底部导航栏 -->
	  <u-tabbar v-model="current" :list="tabBarList" :selected-color="activeColor" :border-style="inactiveColor"
	    :border-top="borderTop" />
	</view>
</template>

<script>  
export default {  
  data() {  
    return {  
	  //导航信息：-----------------------------------
	  title: '用户个人中心', // 导航栏的标题，这会显示在页面的顶部或作为当前视图的标题
	  tabBarList: this.$store.state.dynamicTabbar, // 导航栏的列表项，来源于Vuex状态管理中的dynamicTabbar
	  current: 3, // 当前激活的导航项的索引，0表示第一个导航项
	  borderTop: true, // 控制是否有顶部边框，true表示有边框
	  inactiveColor: 'black', // 未激活的TabBarItem的颜色
	  activeColor: 'red' ,// 激活的TabBarItem的颜色
	  //-----------------------------------
	  userPhoto:"../../static/images/preview.png",
      isLoggedIn: false, // 默认为未登录  
      userName: '', // 用户名，登录后从服务器或其他地方获取  
    };  
  },
  
  created(){
  		 let user=uni.getStorageSync("user")
  		 console.log("存在",user)
  		 if(user){
			 this.isLoggedIn=true
  			 console.log("user键有值，存在",user[0].userName)
  			 this.userName=user[0].userName
  		 }
  		 
  },
	methods:{
		toLogin(){
			uni.navigateTo({
				url:'/pages/index/login'
			})
		},
		gotoorders(){
			uni.navigateTo({
				url:"/pages/index/orders"
			})
		},
		gotoappraise(){
			uni.navigateTo({
				url:"/pages/index/appraise"
			})
		},
		gotoPendingpayment(){
			uni.navigateTo({
				url:"/pages/index/Pendingpayment"
			})
		},
		gotoOngoing(){
			uni.navigateTo({
				url:"/pages/index/Ongoing"
			})
		}
		
	}
};  
</script>  

<style scoped lang="scss">
	
	.grid-text{
		margin-top: 5px;
		
	}
	.u-grid {  
	  margin-top:50px;
	  border: none;  
	  border-radius: 10px;  
	  overflow: hidden;  
	}  
	.container {  
	  padding: 10px;  
	}  
	  
	.top-info {  
	  display: flex;  
	  align-items: center;  
	  margin-bottom: 15px;  
	  margin-top: 20px;
	  margin-left: 20px;
	}  
	  
	.avatar {  
	  width: 90px;  
	  height:90px;  
	  border-radius: 50%;  
	  margin-right: 10px;  
	}  
	  
	.user-info {  
	  flex: 1;  
	  margin-left:5px
	}  
	  
	.username {  
	  font-size: 16px;  
	  font-weight: bold;  
	}  
	  
	.function-list {  
	  display: flex;  
	  flex-wrap: wrap;  
	}  
	  
	.function-item {  
	  display: flex;  
	  align-items: center;  
	  margin-bottom: 10px;  
	  margin-right: 10px;  
	  padding: 10px;  
	  background-color: #f9f9f9;  
	  border-radius: 5px;  
	}  
	  
	.function-item .icon {  
	  width: 24px;  
	  height: 24px;  
	  margin-right: 5px;  
	}  
	  
	.function-item text {  
	  font-size: 14px;  
	}
</style>